Telegram Group & Telegram Channel
​​Svg в html.
Svg — разметка позволяющая создавать изображения, которые можно масштабировать без потери качества. Дизайнеры очень часто используют векторные иконки, логотипы и другие элементы дизайна на странице, так вот, как лучше взаимодействовать с данной разметкой? Есть несколько способов, выбирайте тот, который понравиться

1) При помощи отдельного файла, самый простой и понятный способ. Загружаете файл с форматом .svg из макета, помещаете в папку с картинками и через тег img выводите на станицу, но у этого способа есть явный недостаток — нельзя взаимодействовать с разметкой: нельзя поменять цвет, обводку, радиус и тд. Используйте этот вариант, если вам не нужно обращаться к svg, например если это какой-то элемент декора или иконка, которая статична, не имеет ховеров и не должна анимироваться 

2) Вставить svg прямо в разметку, все так же сохраняете изображение к себе на компьютер, открываете его через редактор и копируете содержимое, потом просто вставляете в разметку и получаете готовую икону, которую можно спокойно изменять, очень просто и удобно, но также имеет свои недостатки, например, если svg изображение очень большое и состоит из множеств элементом, то будет неудобно прописывать ему стили, а также разбираться в коде, если таких изображений много. Подойдёт в тех случаях, когда векторной графики на сайте не много, либо если у вас стоит задача детально работать с svg, добавлять различные анимации, следить за состоянием, изменять при помощи js и тд

3) Использование svg спрайтов. Этот способ решает проблему бессмысленного нагромождения кода, если коротко, то это одно большое svg, в котором через тег symbol вставлены другие svg. У каждого элемента есть id, с помощью которого и будет находиться нужное изображение, для этого используется еще один тег — use, где в параметре xlink:href нужно передать путь к файлу(если создали в отдельном файле) и id, пользоваться таким svg можно точно так же, как и обычным, добавлю видео с подробным объяснением svg спрайтов

4) Иконочный шрифт. Думаю здесь не надо подробностей, svg иконки используются как обычный шрифт и регулируются через свойства font-size и color. Очень удобно в использовании, но нужно подгружать дополнительный шрифт. А если вы захотите добавить еще одну иконку, то вам придется заново переустанавливать данный шрифт, будет отличным решением, когда вы уже знаете все иконки для проекта и хотите быстро менять их стили при наведении. Пользовался этим способом до недавнего времени, пока не перешел на спрайты, для спрайтов рекомендую еще настроить gulp сборку, чтобы она сама создавала файл со всеми иконками, а вы просто экспортировали их, если надо могу кинуть ссылку на подобную сборку



tg-me.com/ProgrammerwayIT/514
Create:
Last Update:

​​Svg в html.
Svg — разметка позволяющая создавать изображения, которые можно масштабировать без потери качества. Дизайнеры очень часто используют векторные иконки, логотипы и другие элементы дизайна на странице, так вот, как лучше взаимодействовать с данной разметкой? Есть несколько способов, выбирайте тот, который понравиться

1) При помощи отдельного файла, самый простой и понятный способ. Загружаете файл с форматом .svg из макета, помещаете в папку с картинками и через тег img выводите на станицу, но у этого способа есть явный недостаток — нельзя взаимодействовать с разметкой: нельзя поменять цвет, обводку, радиус и тд. Используйте этот вариант, если вам не нужно обращаться к svg, например если это какой-то элемент декора или иконка, которая статична, не имеет ховеров и не должна анимироваться 

2) Вставить svg прямо в разметку, все так же сохраняете изображение к себе на компьютер, открываете его через редактор и копируете содержимое, потом просто вставляете в разметку и получаете готовую икону, которую можно спокойно изменять, очень просто и удобно, но также имеет свои недостатки, например, если svg изображение очень большое и состоит из множеств элементом, то будет неудобно прописывать ему стили, а также разбираться в коде, если таких изображений много. Подойдёт в тех случаях, когда векторной графики на сайте не много, либо если у вас стоит задача детально работать с svg, добавлять различные анимации, следить за состоянием, изменять при помощи js и тд

3) Использование svg спрайтов. Этот способ решает проблему бессмысленного нагромождения кода, если коротко, то это одно большое svg, в котором через тег symbol вставлены другие svg. У каждого элемента есть id, с помощью которого и будет находиться нужное изображение, для этого используется еще один тег — use, где в параметре xlink:href нужно передать путь к файлу(если создали в отдельном файле) и id, пользоваться таким svg можно точно так же, как и обычным, добавлю видео с подробным объяснением svg спрайтов

4) Иконочный шрифт. Думаю здесь не надо подробностей, svg иконки используются как обычный шрифт и регулируются через свойства font-size и color. Очень удобно в использовании, но нужно подгружать дополнительный шрифт. А если вы захотите добавить еще одну иконку, то вам придется заново переустанавливать данный шрифт, будет отличным решением, когда вы уже знаете все иконки для проекта и хотите быстро менять их стили при наведении. Пользовался этим способом до недавнего времени, пока не перешел на спрайты, для спрайтов рекомендую еще настроить gulp сборку, чтобы она сама создавала файл со всеми иконками, а вы просто экспортировали их, если надо могу кинуть ссылку на подобную сборку

BY Programmer Way | IT и фриланс




Share with your friend now:
tg-me.com/ProgrammerwayIT/514

View MORE
Open in Telegram


Programmer Way | IT и фриланс Telegram | DID YOU KNOW?

Date: |

Tata Power whose core business is to generate, transmit and distribute electricity has made no money to investors in the last one decade. That is a big blunder considering it is one of the largest power generation companies in the country. One of the reasons is the company's huge debt levels which stood at ₹43,559 crore at the end of March 2021 compared to the company’s market capitalisation of ₹44,447 crore.

Telegram auto-delete message, expiring invites, and more

elegram is updating its messaging app with options for auto-deleting messages, expiring invite links, and new unlimited groups, the company shared in a blog post. Much like Signal, Telegram received a burst of new users in the confusion over WhatsApp’s privacy policy and now the company is adopting features that were already part of its competitors’ apps, features which offer more security and privacy. Auto-deleting messages were already possible in Telegram’s encrypted Secret Chats, but this new update for iOS and Android adds the option to make messages disappear in any kind of chat. Auto-delete can be enabled inside of chats, and set to delete either 24 hours or seven days after messages are sent. Auto-delete won’t remove every message though; if a message was sent before the feature was turned on, it’ll stick around. Telegram’s competitors have had similar features: WhatsApp introduced a feature in 2020 and Signal has had disappearing messages since at least 2016.

Programmer Way | IT и фриланс from cn


Telegram Programmer Way | IT и фриланс
FROM USA